<template>
	<view :class="themeName">
		<view class=" client-level-list p-30">
			<view class="client-level-item">

				<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
					  auto: false,
					  noMoreSize: 5,
					  empty: {
					  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: $zhTran('暂无折扣等级~'), // 提示
					  	fixed: true
					  }
				  }" :down="{ 
					  auto: true,
					}" :bottom="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<u-radio-group v-model="clevel_id">
						<block v-for="(item, idx) in clientLevelList" :key="idx">
							<view class="client-level p-20 m-b-20" @click="radioGroupChange(item)">
								<view class="level-header flex row-between m-b-20">
									<view>
										<view class="title">{{item.title}}</view>
										<view class="desc">{{$zhTran('利润折扣等级')}}</view>
									</view>
									<view>
										<view class="discount">{{item.discount}}%</view>
										<view class="desc">{{$zhTran('销售折扣率')}}</view>
									</view>
								</view>
								<u-divider half-width="100%" :use-slot="false"></u-divider>
								<view class="footer flex row-between m-t-20">
									<view class="flex">
										<u-radio :name="item.id"></u-radio>
									</view>
									<view class="flex">
										<view class="avatar">
											<image src="@/bundle2/static/images/icon-user.png" mode="widthFix"></image>
										</view>
										<view class="flex m-l-10" style="color: rgba(128, 128, 128, 1);">
											{{$zhTran('当前客户')}} <text
												style="color: rgba(64, 115, 250, 1);">{{item.count}}</text>
											{{$zhTran('人')}}
										</view>
									</view>
								</view>
							</view>
						</block>
					</u-radio-group>
				</mescroll-uni>
			</view>
		</view>
		<view class="functions flex row-between">
			<view style="color: rgba(128, 128, 128, 1);">{{$zhTran('已选')}}：{{level_title}}</view>
			<button class="apply-btn" @tap="editClientLevel">{{$zhTran('确定')}}</button>
		</view>
	</view>
</template>


<script>
	import {
		apiCloudShopStoreClientLevel,
		apiCloudShopStoreClientEdit,
	} from "@/api/cloudshop"
	import {
		currentPage,
	} from "@/utils/tools";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'clientLevelChange',
		mixins: [MescrollMixin],

		data() {
			return {
				clientLevelList: [],
				clsp_id: '',
				clsp_cid: '',
				clevel_id: '',
				old_clevel_id: '',
				level_title: ''
			}
		},

		methods: {
			refreshData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCloudShopStoreClientLevel({
					store_id: this.clsp_id,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.clientLevelList = []
					this.clientLevelList = [...this.clientLevelList, ...lists]
					this.clientLevelList = this.$zhTran(this.clientLevelList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			radioGroupChange(row) {
				this.clevel_id = row.id
				this.level_title = row.title
			},
			editClientLevel() {
				if (this.old_clevel_id == this.clevel_id) {
					this.$Router.back()
				} else {
					var vm = this
					uni.showModal({
						title: this.$zhTran("温馨提示"),
						content: this.$zhTran("确认修改该客户折扣等级?此操作将影响客户下单"),
						confirmColor: this.themeColor,
						success: async ({
							confirm
						}) => {
							if (!confirm) return;

							apiCloudShopStoreClientEdit({
								clsp_cid: vm.clsp_cid,
								clevel_id: vm.clevel_id
							}).then(res => {
								setTimeout(() => {
									vm.$Router.back(1, {
										success: () => {
											const {
												onLoad,
												options
											} = currentPage();
											// 刷新上一个页面
											onLoad && onLoad(options);
										},
									});
								}, 2000);
							}).catch((err) => {
								vm.$toast({
									title: vm.$zhTran(err)
								})
							})
						},
					});
				}
			}
		},

		async onLoad() {
			const {
				clsp_id,
				clsp_cid,
				clevel_id,
				level_title
			} = this.$Route.query
			this.clsp_id = clsp_id
			this.clsp_cid = clsp_cid
			this.clevel_id = clevel_id
			this.old_clevel_id = clevel_id
			this.level_title = this.$zhTran(level_title)
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.refreshData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	.client-level-item {
		height: calc(100vh - 160rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 160rpx - env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.client-level {
		background-color: #fff;
		border-radius: 10rpx;

		.footer {
			.avatar {
				image {
					width: 50rpx;
				}
			}

			.custom-btn {
				padding: 12rpx 30rpx;
				font-size: 28rpx;
				border: 1rpx solid rgba(229, 229, 229, 1);
			}
		}
	}

	.level-header {
		.title {
			color: rgba(0, 0, 0, 1);
			font-size: 32rpx;
			font-weight: bold;
		}

		.discount {
			color: rgba(64, 115, 250, 1);
			font-size: 32rpx;
			font-weight: bold;
		}

		.desc {
			color: rgba(128, 128, 128, 1);
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}


	.functions {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 30rpx constant(safe-area-inset-bottom) 30rpx;
		padding: 0 30rpx env(safe-area-inset-bottom) 30rpx;
		border-top: $-solid-border;
		background-color: #FFFFFF;
	}

	.apply-btn {
		background-color: rgba(64, 115, 250, 1);
		color: #fff;
		font-size: 28rpx;
		padding: 0 50rpx;
	}

	.price-footer {

		.btn {
			width: 50%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 10rpx;


			&--primary {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}
		}
	}

	.pop-result {
		.title {
			font-size: 32rpx;
			color: rgba(38, 38, 38, 1);
		}

		.desc {
			font-size: 24rpx;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>